<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app1">
        <p>商品名称：{{name}}</p>
        <p class="p2">商品价格：{{price}}</p>
        <input type="text" v-model="num">
        <p>小计：{{price * num}}</p>
        <hr>
        <p>{{hobby[3]}}</p>
        <p>{{person.age}}</p>
        <!-- <p>{{person.word}}</p> -->
        <p>111{{person.hasWude?'':'不'}}讲武德</p>
    </div>
    <!-- 先加载vue的源码，然后写自己的js代码 -->
    <script src="../vue.js"></script>
    <script>
        // 实例化-通过Vue的构造函数来获取一个新的实例
        let vm = new Vue({
            // el 挂载元素 element，这个元素内部交给vue管理
            el: '#app1',
            // 数据，所有的响应式数据都要现在data中声明
            data: {
                price: 5000,
                name: 'iphone',
                num: 3,
                hobby: ['唱','跳','rap','打篮球'],
                person: {
                    name: '马保国',
                    age: 70,
                    title: '掌门人',
                    word: '不讲武德',
                    hasWude: true
                }
            }
        })
    </script>
</body>
</html>